<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/bootstrap/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" href="/js/bootstrap/bootstrap3/css/bootstrap-theme.css">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap/bootstrap3/js/bootstrap.js"></script>

    <link rel="stylesheet" href="/js/bootstrap/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="/js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="/js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

    <link rel="stylesheet" href="/js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <script type="text/javascript" src="/js/bootstrap/bootstrap-bootbox/bootbox.js"></script>

    <link rel="stylesheet" href="/js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.css">
    <script type="text/javascript" src="/js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>

    <link rel="stylesheet" href="/js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.css">
    <script type="text/javascript" src="/js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.js"></script>

    <link rel="stylesheet" href="/js/bootstrap/bootstrap-fileinput/css/fileinput.css">
    <script type="text/javascript" src="/js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="/js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <h5>欢迎<span id="span"></span>登录</h5>
            <input type="hidden" id="1" th:value="${session.user.role}">
            <!-- 导航条内容 -->
            <a class="navbar-brand" href="#">机房流量统计系统</a>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <!-- 创建一个树的容器 -->
            <div id="myTree"></div>
        </div>
        <div class="col-md-9">
            <div id="myTabs">
                <!-- 新选项卡 -->
                <ul class="nav nav-tabs" id="tablist">
                    <li role="presentation" class="active"><a href="#home"
                                                              role="tab" data-toggle="tab">欢迎</a></li>
                </ul>
                <!-- 选项卡下内容 -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function(){
        $.addtabs({iframeHeight: 550});
        initTree();
        ss();
    })
    function ss(){
        var a= $("#1").val();
        if (a==1){
            $("#span").text("普通用户");
        }else {
            $("#span").text("管理员");
        }
    }
    function initTree() {
        var b=$("#1").val();
        var c=null;
        if (b==1){
            c="../tree1.json"
        }else {
            c="../tree.json"
        }
        $.ajax({
            url:c,
            success:function(data){
                $('#myTree').treeview({
                    data:data,
                    onNodeSelected:function(event, node) {//点击事件
                        alert(node.href)
                        $.addtabs.add({
                            id:node.id,
                            title:node.text,
                            url:node.href
                        });
                    }
                })
            },
        })
    }
</script>
</html>